import React from 'react'
import CIcon from "../../../../../../res/images/web/game-room/corner 1@2x.png";
import YellowIcon from "../../../../../../res/images/web/game-room/yellow card 1@2x.png";
import RedIcon from "../../../../../../res/images/web/game-room/red card 1@2x.png";

const CornerYellowRed = props => {

    const {
        team,
        type,
    } = props

    const m = {
        home: '#213A4B',
        away: '#FFA500',
    }

    const color = m[type]

    const {
        name_zh,
    } = team

    const dot = color => <div
        style={{
            backgroundColor: `${color}`,
            height: '10px',
            width: '10px',
            borderRadius: '50%',
            marginRight: '8px',
        }}
    />

    const template = (
        <div
            style={{
                width: '49.5%',
                textAlign: 'center',
            }}
        >
            <div
                className='flex-center-align-center'
                style={{height: '24px',}}
            >
                {dot(color)}
                <p>{name_zh}</p>
            </div>

            <div
                className='flex-space-between-align-center game-room-live-card'
                style={{
                    padding: '12px',
                }}
            >
                <div>
                    <img src={CIcon} alt='' style={{width: 16, height: 16,}}/>
                    <p>{team[2] ? team[2] : 0}</p>
                </div>

                <div>
                    <img src={YellowIcon} alt='' style={{width: 16, height: 16,}}/>
                    <p>{team[3] ? team[3] : 0}</p>
                </div>

                <div>
                    <img src={RedIcon} alt='' style={{width: 16, height: 16,}}/>
                    <p>{team[4] ? team[4] : 0}</p>
                </div>
            </div>
        </div>
    )

    return template

}

export default CornerYellowRed
